import React, {Component} from 'react';
import {Image, StyleSheet, Text, View,} from 'react-native';
import {TabNavigator} from 'react-navigation';
import * as Color from "../constant/Color";
import TouchButton from "../widget/btn/HighlightButton";
import TabFlatList1 from "./PageTabFlatList1";
import TabFlatList2 from "./PageTabFlatList2";

const imageMain_En  = require('../../../img/ic_main_en.png');
const imageMain_Dis = require('../../../img/ic_main_dis.png');
const imageMsg_sum  = require('../../../img/ic_duijiang_point.png');

const configs = {
    // ---Top-config--------------------------------------------------------------------
    TabNavigatorConfigsTop: {
        tabBarVisible: true,
        swipeEnabled: true,
        animationEnabled: true,
        tabBarPosition: 'top',
        lazy: true,
        initialRouteName: 'Top2',    // 初始页面
        backBehavior: 'initialRoute',   // 按返回键:initialRoute:跳转到初始页卡， none 为不跳转
        tabBarOptions: {

            activeBackgroundColor: Color.colorPrimary,
            activeTintColor: Color.colorPrimary,
            inactiveBackgroundColor: Color.colorPrimary,
            inactiveTintColor: Color.colorPrimary,
            showLabel: true,
            showIcon: false, // android 默认不显示 icon, 需要设置为 true 才会显示

            style: {            // TabBar
                // height:40,
                backgroundColor: Color.windowWhite,
            },

            labelStyle: {       // 文字
                fontSize: 12,
            },

            iconStyle: {        // icon
            },

            indicatorStyle: {   // indicator
                height: 2,      // 如TabBar下面显示有一条线，可以设高度为0后隐藏
                backgroundColor: Color.colorPrimary
            },
        },
    },

    // ---Bottom-config--------------------------------------------------------------------
    TabNavigatorConfigsBottom: {
        tabBarVisible: true,
        swipeEnabled: true,
        animationEnabled: true,
        tabBarPosition: 'bottom',
        lazy: true,
        initialRouteName: 'BOTTOM2',         // 初始页面
        backBehavior: 'initialRoute',     // 按返回键:initialRoute:跳转到初始页卡， none 为不跳转
        tabBarOptions: {

            activeBackgroundColor: Color.white,
            activeTintColor: Color.colorAccent,
            inactiveBackgroundColor: Color.white,
            inactiveTintColor: Color.gray,
            showLabel: true,
            showIcon: true,     // android 默认不显示 icon, 需要设置为 true 才会显示

            style: {            // TabBar
                height: 60,
                backgroundColor: Color.colorPrimary,
            },

            labelStyle: {       // 文字
                fontSize: 12,
            },

            iconStyle: {        // icon
            },

            indicatorStyle: {   // indicator
                height: 0,  // 如TabBar下面显示有一条线，可以设高度为0后隐藏
                backgroundColor: Color.white
            },
        },
    },
};

class Top2 extends Component {
    render() {
        return (
            <View style={{backgroundColor: 'white', flex: 1, alignItems: 'center',}}>
                <Text>这是(Bottom2里的)Top2</Text>
                <View style={{height: 15}}/>
                <TouchButton title={'跳转Top1'} onPress={() => {
                    this._switchToTop1()
                }}/>
                <View style={{height: 15}}/>
                <TouchButton title={'跳转BOTTOM1'} onPress={() => {
                    this._switchToBottom1()
                }}/>
            </View>)
    }

    _switchToTop1() {
        this.props.navigation.navigate('Top1');
    }

    _switchToBottom1() {
        this.props.navigation.navigate('BOTTOM1');
    }
}

const Bottom2 = TabNavigator({
        'Top1': {
            screen: TabFlatList1,
            navigationOptions: {
                // header: null,   // 控制当本页显示时有没有标题栏
                tabBarLabel: ({focused, tintColor}) => (
                    <View style={styles.container}>
                        <Text
                            style={styles.text}>
                            123456
                        </Text>
                        <Image
                            style={styles.icon_status}
                            source={imageMsg_sum}/>
                        {/*source={this.state.countMsgUnread > 0 ? imageMsg_sum : null}/>*/}
                    </View>

                ),
            }
        },
        'Top2': {
            screen: Top2,
            navigationOptions: {
                tabBarLabel: '第2页',
            }
        },
    },
    configs.TabNavigatorConfigsTop
);

const MainScreenNavigator = TabNavigator({
        'BOTTOM1': {
            screen: TabFlatList2,
            navigationOptions: {
                // header: null,   // 控制当本页显示时有没有标题栏
                tabBarLabel: '主页',
                tabBarIcon: ({tintColor, focused}) => (
                    <Image
                        style={styles.img}
                        source={focused ? imageMain_En : imageMain_Dis}/>
                ),
            }
        },
        'BOTTOM2': {
            screen: Bottom2,
            navigationOptions: {
                tabBarLabel: '我',
                tabBarIcon: ({tintColor, focused}) => (
                    <Image
                        style={styles.img}
                        source={focused ? imageMain_En : imageMain_Dis}/>
                ),
            }
        },
    },
    configs.TabNavigatorConfigsBottom
);

MainScreenNavigator.navigationOptions = {
    title: 'Tab bar',
};

export default MainScreenNavigator;

const styles = StyleSheet.create({
    img: {
        height: 20,
        width: 20,
        resizeMode: Image.resizeMode.stretch,
    },
    container: {
        height: 20,
        flexDirection: 'row',
    },
    text: {
        height: 20,
        color: Color.colorPrimary,
    },
    icon_status: {
        height: 5,
        width: 5,
        resizeMode: Image.resizeMode.stretch,
    },
});



